<template>
  <div class="app-container">
    <el-drawer :wrapperClosable="false" :close-on-press-escape="false" title="银行虚拟户" @closed="bankClose"
      :visible.sync="open" :size="drawerSize" append-to-body>
      <el-form v-loading="loading" :disabled="form.status === 1 || form.status === 3 || form.status === 4" ref="form"
        :model="form" :rules="rules" label-width="140px" class="form">
        <template v-if="isSuning && isEnterprise">
          <el-form-item label="绑定卡类型" prop="bindCardType"
            :rules="[{ required: true, message: '必须选择绑定卡类型', trigger: 'blur' }]">
            <el-select v-model="form.bindCardType" placeholder="请选择绑定卡类型">
              <el-option label="对公银行账户" value="PUBLIC_CARD">对公银行账户</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="绑定银行" prop="bindCardNo"
            :rules="[{ required: true, message: '必须选择绑定银行', trigger: 'blur' }]">
            <el-select v-model="form.bindBankCode" placeholder="请选择绑定银行" filterable remote clearable
              :remote-method="bankCodeMethod" :loading="bankCodeLoading">
              <el-option v-for="item in bankOrigin" :key="item.code" :label="item.name" :value="item.code" />
              <el-option v-for="item in bankList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
          <el-form-item label="支行行号" prop="branchBankNo"
            :rules="[{ required: true, message: '支行行号不能为空', trigger: 'blur' }]">
            <el-input v-model="form.branchBankNo" :maxlength="32" placeholder="请输入绑定支行行号" />
          </el-form-item>
          <el-form-item label="绑定账户名称" prop="bindAccountName"
            :rules="[{ required: true, message: '绑定账户名称不能为空', trigger: 'blur' }]">
            <name-input v-model="form.bindAccountName" :maxlength="32" placeholder="请输入绑定账户名称" />
          </el-form-item>
          <el-form-item label="绑定银行卡号" prop="bindCardNo"
            :rules="[{ required: true, message: '绑定银行卡号不能为空', trigger: 'blur' }]">
            <code-input v-model="form.bindCardNo" :maxlength="32" placeholder="请输入绑定银行卡号" />
          </el-form-item>
        </template>
        <el-form-item v-if="isSuning" label="营业执照图片" prop="socialCreditCodeImageUrl">
          <YeePayFileUpload @input="handUploadImg" keys="socialCreditCodeImageUrl" :file-size="5"
            :path="form.socialCreditCodeImageUrl" :limit="1" v-model="form.socialCreditCodeImage" />
        </el-form-item>
        <el-form-item v-if="isWHLHB" label="企业证件起始日期" prop="businessLicenceEffectiveDate"
          :rules="[{ required: true, message: '企业证件起始日期不能为空', trigger: 'change' }]">
          <el-date-picker clearable v-model="form.businessLicenceEffectiveDate" type="date" value-format="yyyy-MM-dd"
            placeholder="请选择企业证件起始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="isWHLHB" label="企业证件截止日期" prop="businessLicenceExpirationDate"
          :rules="[{ required: true, message: '企业证件截止日期不能为空', trigger: 'change' }]">
          <el-date-picker clearable v-model="form.businessLicenceExpirationDate" type="date" value-format="yyyy-MM-dd"
            placeholder="请选择企业证件截止日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="isWHLHB" label="法人民族" prop="legalNation"
          :rules="[{ required: true, message: '法人民族不能为空', trigger: 'blur' }]">
          <el-select filterable remote v-model="form.legalNation" clearable placeholder="请输入法人民族"
            :remote-method="remoteMethod" :loading="nationLoading" style="width: 100%;">
            <el-option v-for="item in nationList" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="isWHLHB" label="法人性别" prop="legalGender"
          :rules="[{ required: true, message: '请选择法人性别', trigger: 'change' }]">
          <el-select v-model="form.legalGender" placeholder="请选择商户类型" clearable>
            <el-option label="男" value="MALE" />
            <el-option label="女" value="FMALE" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="isWHLHB || isSuning" label="法人手机号码" prop="legalMobile" :rules="[
          { required: true, message: '法人手机号码不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '联系人手机号格式不正确', trigger: 'blur' }
        ]">
          <code-input v-model.number="form.legalMobile" placeholder="请输入法人手机号码" />
        </el-form-item>
        <el-form-item v-if="isWHLHB" label="法人证件地址" prop="legalContactAddress"
          :rules="[{ required: true, message: '法人证件地址不能为空', trigger: 'blur' }]">
          <el-input v-model="form.legalContactAddress" :maxlength="200" placeholder="请输入法人证件地址" />
        </el-form-item>
        <el-form-item v-if="isWHLHB" label="法人证件起始日期" prop="legalLicenceEffectiveDate"
          :rules="[{ required: true, message: '法人证件起始日期不能为空', trigger: 'change' }]">
          <el-date-picker clearable v-model="form.legalLicenceEffectiveDate" type="date" value-format="yyyy-MM-dd"
            placeholder="请选择法人证件起始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="isWHLHB" label="法人证件截止日期" prop="legalLicenceExpirationDate"
          :rules="[{ required: true, message: '法人证件截止日期不能为空', trigger: 'change' }]">
          <el-date-picker clearable v-model="form.legalLicenceExpirationDate" type="date" value-format="yyyy-MM-dd"
            placeholder="请选择法人证件截止日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="isWHLHB" label="法人证件发证机关" prop="legalCardCreateUnit"
          :rules="[{ required: true, message: '法人证件发证机关不能为空', trigger: 'blur' }]">
          <el-input v-model="form.legalCardCreateUnit" :maxlength="150" placeholder="请输入法人证件发证机关" />
        </el-form-item>
        <el-form-item v-if="isSuning" label="法人证件照片正面（人像面）" prop="legalCardImageFont">
          <YeePayFileUpload @input="handUploadImg" keys="legalCardImageFont" :file-size="5"
            :path="form.legalCardImageFont" :limit="1" v-model="form.legalCardImageFontImg" />
        </el-form-item>
        <el-form-item v-if="isSuning" label="法人证件照片反面（国徽面）" prop="legalCardImageBack">
          <YeePayFileUpload @input="handUploadImg" keys="legalCardImageBack" :file-size="5"
            :path="form.legalCardImageBack" :limit="1" v-model="form.legalCardImageBackImg" />
        </el-form-item>
        <el-form-item v-if="isSuning" label="经办人姓名" prop="operatorName"
          :rules="[{ required: true, message: '经办人姓名不能为空', trigger: 'blur' }]">
          <el-input v-model.number="form.operatorName" placeholder="请输入经办人姓名" />
        </el-form-item>
        <el-form-item v-if="isSuning" label="经办人手机号" prop="mobileNo" :rules="[
          { required: true, message: '经办人手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '经办人手机号格式不正确', trigger: 'blur' }
        ]">
          <code-input v-model.number="form.mobileNo" placeholder="请输入法人手机号码" />
        </el-form-item>
        <el-form-item v-if="isXibx" label="法人姓名" prop="contactName"
          :rules="[{ required: true, message: '请输入法人姓名', trigger: 'blur' }]">
          <el-input v-model="form.contactName" placeholder="请输入法人姓名" />
        </el-form-item>
        <el-form-item v-if="isXibx" label="法人实名手机号" prop="contactMobile"
          :rules="[{ required: true, message: '请认真填写法人实名手机号，需要接收短信验证码！', trigger: 'blur' }]">
          <el-input v-model="form.contactMobile" placeholder="请认真填写法人实名手机号，需要接收短信验证码！" />
        </el-form-item>
        <el-form-item v-if="isXibx" label="法人证件类型" prop="contactCardType"
          :rules="[{ required: true, message: '请选择法人证件类型', trigger: 'blur' }]">
          <el-select v-model="form.contactCardType" placeholder="请选择法人证件类型">
            <el-option label="身份证" value="ID_CARD">身份证</el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="isXibx" label="法人证件号码" prop="contactCardNo"
          :rules="[{ required: true, message: '请输入法人证件号码', trigger: 'blur' }]">
          <el-input v-model="form.contactCardNo" placeholder="请输入法人证件号码" />
        </el-form-item>
        <template v-if="form.status === 1 || form.status === 2 || form.status === 3 || form.status === 4">
          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status" disabled placeholder="请选择商户类型" clearable>
              <el-option label="审核中" :value="1" />
              <el-option label="申请驳回" :value="2" />
              <el-option label="申请通过" :value="3" />
              <el-option label="待激活" :value="4" />
            </el-select>
          </el-form-item>
          <el-form-item label="驳回原因" v-if="form.status === 2" prop="failReason">
            <el-input v-model="form.failReason" disabled placeholder="请输入驳回原因" />
          </el-form-item>
        </template>
        <template v-if="form.status === 3">
          <el-form-item label="银行账户号" prop="bankAccountNo">
            <code-input v-model="form.bankAccountNo" disabled :maxlength="150" placeholder="请输入银行账户号" />
          </el-form-item>
          <el-form-item label="开户请求时间" prop="openRequestTime">
            <el-input v-model="form.openRequestTime" disabled :maxlength="150" placeholder="请输入开户请求时间" />
          </el-form-item>
          <el-form-item label="开户完成时间" prop="openCompleteTime">
            <el-input v-model="form.openCompleteTime" disabled :maxlength="150" placeholder="请输入开户完成时间" />
          </el-form-item>
        </template>
        <template v-if="form.status === 4">
          <el-form-item label="激活状态" prop="bindStatus">
            <el-select v-model="form.bindStatus" disabled placeholder="未激活">
              <el-option label="初始化" value="INIT" />
              <el-option label="处理中" value="PROCESS" />
              <el-option label="成功" value="SUCCESS" />
              <el-option label="失败" value="FAIL" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="form.bindStatus === 'FAIL'" label="激活失败原因" prop="bindMsg">
            <el-input v-model="form.bindMsg" disabled />
          </el-form-item>
          <el-form-item label="验证状态" prop="authStatus">
            <el-select v-model="form.authStatus" disabled placeholder="未验证">
              <el-option label="成功" value="SUCCESS" />
              <el-option label="失败" value="FAIL" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="form.authStatus === 'FAIL'" label="验证失败原因" prop="authMsg">
            <el-input v-model="form.authMsg" disabled />
          </el-form-item>
        </template>
        <template v-if="isWHLHB || isSuning">
          <el-divider content-position="left">最终受益人信息</el-divider>
          <div class="benefitInfoDTOList">
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddTab">添加</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteTab">删除</el-button>
              </el-col>
            </el-row>
            <el-table :data="form.benefitInfoDTOList" :row-class-name="rowTabIndex"
              @selection-change="handleAddTabSelectionChange" ref="table">
              <el-table-column type="selection" width="50" align="center" />
              <el-table-column label="收益人姓名" prop="benefitName" align="center" width="150">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'benefitInfoDTOList.' + scope.$index + '.benefitName'"
                    :rules="[{ required: true, message: '收益人姓名不能为空', trigger: 'blur', }]">
                    <el-input v-model="scope.row.benefitName" :maxlength="50" placeholder="请输入收益人姓名" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="证件类型" prop="benefitIdType" align="center" width="160">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'benefitInfoDTOList.' + scope.$index + '.benefitIdType'"
                    :rules="[{ required: true, message: '请选择证件类型', trigger: 'change', }]">
                    <el-select @change="$forceUpdate()" v-model="scope.row.benefitIdType" placeholder="请选择证件类型"
                      clearable>
                      <el-option label="身份证" value="ID_CARD" />
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="受益人证件号码" prop="benefitIdNo" align="center" width="170">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'benefitInfoDTOList.' + scope.$index + '.benefitIdNo'" :rules="[
                    { required: true, message: '受益人证件号码不能为空', trigger: 'blur', },
                    { pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[\dXx]$/, message: '受益人证件号码格式不正确', trigger: 'blur' }
                  ]">
                    <code-input v-model="scope.row.benefitIdNo" :maxlength="20" placeholder="请输入受益人证件号码" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="证件有效期开始日期" width="170" prop="benefitStartDate" align="center">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'benefitInfoDTOList.' + scope.$index + '.benefitStartDate'"
                    :rules="[{ required: true, message: '请选择证件有效期开始日期', trigger: 'change', }]">
                    <el-date-picker type="date" v-model="scope.row.benefitStartDate" placeholder="请选择证件有效期开始日期"
                      format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="证件有效期结束日期" width="170" prop="benefitExpireDate" align="center">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'benefitInfoDTOList.' + scope.$index + '.benefitExpireDate'">
                    <el-date-picker type="date" v-model="scope.row.benefitExpireDate" placeholder="请选择证件有效期结束日期"
                      format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column v-if="isSuning" label="受益人证件照正面（人像面）" align="center" prop="benefitImageFont">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'benefitInfoDTOList.' + scope.$index + '.benefitImageFont'"
                    :rules="{ require: true, message: '必须上传受益人证件照正面', trigger: 'change' }">
                    <YeePayFileUpload @input="handBenefitImg" :keys="scope.$index + '.benefitImageFont'" :file-size="5"
                      :path="scope.row.benefitImageFont" :limit="1" v-model="scope.row.benefitImageFontImg">
                    </YeePayFileUpload>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column v-if="isSuning" label="受益人证件照反面（国徽面）" align="center" prop="benefitImageBack">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'benefitInfoDTOList.' + scope.$index + '.benefitImageBack'"
                    :rules="{ require: true, message: '必须上传受益人证件照反面', trigger: 'change' }">
                    <YeePayFileUpload @input="handBenefitImg" :keys="scope.$index + '.benefitImageBack'" :file-size="5"
                      :path="scope.row.benefitImageBack" :limit="1" v-model="scope.row.benefitImageBackImg">
                    </YeePayFileUpload>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="受益人住址" align="center" prop="benefitAddress">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'benefitInfoDTOList.' + scope.$index + '.benefitAddress'"
                    :rules="{ required: true, message: '受益人住址不能为空', trigger: 'blur', }">
                    <el-input v-model="scope.row.benefitAddress" :maxlength="200" placeholder="请输入受益人住址" />
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-form>
      <div class="footer-operation">
        <el-button @click="initialization(); open = false">返回</el-button>
        <el-button :loading="loading" v-hasPermi="['ecs:yeePayAccountBank:add']"
          v-if="form.status === 0 || form.status === 2" type="success" @click="submitForm" v-clickOnce>保存草稿</el-button>
        <el-button :loading="loading" v-hasPermi="['ecs:yeePayAccountBank:accountBank']"
          v-if="form.status === 0 || form.status === 2" type="primary" @click="submit" v-clickOnce>提交</el-button>
        <el-button :loading="loading" v-hasPermi="['ecs:yeePayAccountBank:queryBank']" v-if="form.status === 1"
          type="primary" @click="query">查询</el-button>
        <template v-if="form.status === 4">
          <el-button type="success" @click="submitXibBindCard" v-clickOnce>申请激活</el-button>
        </template>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import YeePayFileUpload from '@/components/yeePayFileUpload/index.vue'
import {
  accountBank, xibBindCard, authApplyConfirm,
  addYeePayAccountBank,
  getYeePayAccountBank, queryYeePayAccountBank,
  updateYeePayAccountBank
} from '@/api/ecs/yeePayAccountBank'
import { listYeePayBank } from '@/api/ecs/yeePayBank'
import { ocrIdCard, ocrBankCard, ocrBusinessLicense } from '@/api/ecs/baiduOcr'

export default {
  props: {
    openBank: {
      type: Boolean,
      default: false
    },
    requestId: {
      type: String,
      default: "",
    },
    productCode: {
      type: String,
      default: "",
    },
    accountType: {
      type: String,
      default: '',
    },
  },
  components: {
    YeePayFileUpload
  },
  computed: {
    isWHLHB() {
      return this.productCode === 'ENTERPRISE_RECHARGE_STANDARD_BANKACCOUNTPAY_WHLHB'
        || this.productCode === 'ENTERPRISE_RECHARGE_STANDARD_BANKACCOUNTPAY_WHLHB_D1'
    },
    isSuning() {
      return this.productCode === 'ENTERPRISE_RECHARGE_STANDARD_BANKACCOUNTPAY_SUNINGBANK'
    },
    isXibx() {
      return this.productCode === 'ENTERPRISE_RECHARGE_STANDARD_BANKACCOUNTPAY_XIBX'
    },
    isEnterprise() {
      return this.accountType === 'ENTERPRISE'
    },
    openBankCode() {
      switch (this.productCode) {
        case 'ENTERPRISE_RECHARGE_STANDARD_BANKACCOUNTPAY_WHLHB':
        case 'ENTERPRISE_RECHARGE_STANDARD_BANKACCOUNTPAY_WHLHB_D1':
          return 'WHLHB'
        case 'ENTERPRISE_RECHARGE_STANDARD_BANKACCOUNTPAY_SUNINGBANK':
          return 'SUNINGBANK_MULTICHANNEL'
        case 'ENTERPRISE_RECHARGE_STANDARD_BANKACCOUNTPAY_XIBX':
          return 'XIBX'
      }
    },
    drawerSize() {
      switch (this.productCode) {
        case 'ENTERPRISE_RECHARGE_STANDARD_BANKACCOUNTPAY_WHLHB':
        case 'ENTERPRISE_RECHARGE_STANDARD_BANKACCOUNTPAY_WHLHB_D1':
          return '1200px'
        case 'ENTERPRISE_RECHARGE_STANDARD_BANKACCOUNTPAY_SUNINGBANK':
          return '1500px'
        case 'ENTERPRISE_RECHARGE_STANDARD_BANKACCOUNTPAY_XIBX':
          return '800px'
      }
    },
    openAccountType() {
      switch (this.accountType) {
        case 'ENTERPRISE':
          return 'ENTERPRISE'
        case 'INDIVIDUAL':
          return 'INDIVIDUAL_BUSINESS_TYPE'
      }
    },
  },
  data() {
    return {
      form: {
        benefitInfoDTOList: [],
      },
      nationData: [
        "汉族", "蒙古族", "回族", "藏族", "维吾尔族", "苗族", "彝族", "壮族", "布依族", "朝鲜族",
        "满族", "侗族", "瑶族", "白族", "土家族", "哈尼族", "哈萨克族", "傣族", "黎族", "傈僳族",
        "佤族", "畲族", "高山族", "拉祜族", "水族", "东乡族", "纳西族", "景颇族", "柯尔克孜族",
        "土族", "达斡尔族", "仫佬族", "羌族", "布朗族", "撒拉族", "毛南族", "仡佬族", "锡伯族",
        "阿昌族", "普米族", "塔吉克族", "怒族", "乌孜别克族", "俄罗斯族", "鄂温克族", "德昂族",
        "保安族", "裕固族", "京族", "塔塔尔族", "独龙族", "鄂伦春族", "赫哲族", "门巴族",
        "珞巴族", "基诺族"
      ],
      nationList: [],
      rules: {
        benefitInfoDTOList: [
          { required: true, message: '请先添加受益人信息', trigger: 'change' }
        ],
      },
      loading: false,
      isRefresh: false,
      open: false,
      nationLoading: false,
      checkedTab: [],
      bankOrigin: [],
      bankList: [],
      bankCodeLoading: false,
    }
  },
  methods: {
    initialization() {
      this.form = {
        status: 0,
        requestId: null,
        bindCardType: null,
        bindBankCode: null,
        branchBankNo: null,
        bindAccountName: null,
        bindCardNo: null,
        legalCardImageFont: null,
        legalCardImageFontImg: null,
        legalCardImageBack: null,
        legalCardImageBackImg: null,
        businessLicenceEffectiveDate: null,
        businessLicenceExpirationDate: null,
        legalNation: null,
        legalGender: null,
        legalMobile: null,
        bankAccountNo: null,
        legalContactAddress: null,
        openRequestTime: null,
        openCompleteTime: null,
        legalLicenceEffectiveDate: null,
        legalLicenceExpirationDate: null,
        legalCardCreateUnit: null,
        benefitInfoDTOList: [],
        failReason: null,
        contactName: null,
        contactMobile: null,
        contactCardType: 'ID_CARD',
        contactCardNo: null,
      }
    },
    rowTabIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    handleAddTabSelectionChange(selection) {
      this.checkedTab = selection.map(item => item.index)
    },
    handleAddTab() {
      this.form.benefitInfoDTOList.push({ benefitName: "", benefitIdType: "ID_CARD", benefitIdNo: "", benefitStartDate: "", benefitExpireDate: "", benefitAddress: "" });
    },
    handleDeleteTab() {
      if (this.checkedTab.length === 0) {
        this.$modal.msgError("请先选择要删除的最终受益人信息");
      } else {
        if (this.form.benefitInfoDTOList.length <= this.checkedTab.length) {
          this.$modal.msgError("最少需要保留一个最终受益人信息");
          return;
        }
        const benefitInfoDTOList = this.form.benefitInfoDTOList;
        const checkedTab = this.checkedTab;
        this.form.benefitInfoDTOList = benefitInfoDTOList.filter(function (item) {
          return checkedTab.indexOf(item.index) === -1
        });
      }
    },
    hiddenFields() {
      this.form.openBankCode = this.openBankCode
      this.form.openAccountType = this.openAccountType
    },
    /** 提交按钮 */
    submitForm() {
      this.hiddenFields()
      this.loading = true;
      if (this.form.id != null) {
        updateYeePayAccountBank(this.form).then(response => {
          this.$modal.msgSuccess("保存成功");
          this.open = false;
          this.loading = false;
        });
      } else {
        addYeePayAccountBank(this.form).then(response => {
          this.$modal.msgSuccess("保存成功");
          this.open = false;
          this.loading = false;
        });
      }
    },
    submit() {
      this.hiddenFields()
      this.$refs["form"].validate(valid => {
        if (valid) {
          accountBank(this.form).then(response => {
            this.$modal.msgSuccess("提交成功");
            this.open = false;
            this.loading = false;
          });
        }
      });
    },
    submitXibBindCard() {
      xibBindCard(this.form).then(response => {
        if (response.code === 200) {
          this.$modal.msgSuccess("申请激活成功");
          this.submitAuthApplyConfirm()
        }
      })
    },
    submitAuthApplyConfirm() {
      this.$prompt('请输入验证码', '验证信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[0-9a-z]+$/,
        inputErrorMessage: '验证码格式不正确',
      }).then(({ value }) => {
        this.form.authCode = value
        return authApplyConfirm(this.form)
      }).then(response => {
        if (response.code === 200) {
          this.$modal.msgSuccess("验证确认成功")
          this.open = false
        }
      })
    },
    query() {
      this.loading = true
      queryYeePayAccountBank({ id: this.form.id, requestId: this.form.requestId, requestNo: this.form.requestNo, parentMerchantNo: this.form.parentMerchantNo, merchantNo: this.form.merchantNo }).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.getDetail(this.form.requestId)
        }
      }).catch(() => {
        this.loading = false
      })
    },
    remoteMethod(query) {
      if (query !== '' && query !== null) {
        this.nationLoading = true
        this.nationList = this.nationData.filter(item => {
          return item.toLowerCase()
            .indexOf(query.toLowerCase()) > -1;
        });
        this.nationLoading = false
      }
    },
    bankClose() {
      this.initialization()
      this.open = false
      this.$emit("close", false, this.isRefresh)
    },
    getDetail(val) {
      getYeePayAccountBank({ requestId: val }).then(res => {
        this.loading = false
        if (res.data) {
          this.form = res.data
          listYeePayBank({ code: this.form.bindBankCode }).then(response => {
            this.bankOrigin = response.data
            this.bankCodeLoading = false
          }).catch(() => {
            this.bankCodeLoading = false
          })
        } else {
          this.form.requestId = val
          this.form.status = 0
        }
      })
    },
    bankCodeMethod(query) {
      if (query !== '' && query !== null) {
        this.bankCodeLoading = true
        listYeePayBank({ name: query }).then(response => {
          this.bankList = response.data
          this.bankCodeLoading = false
        }).catch(() => {
          this.bankCodeLoading = false
        })
      }
    },
    handUploadImg(val1, val2, val3) {
      this.form[val2] = val3
    },
    handBenefitImg(val, keys, path) {
      const [idx, prop] = keys.split('.')
      const benefit = this.form.benefitInfoDTOList[parseInt(idx)]
      benefit[prop] = path

      if (!val) return
      switch (prop) {
        case 'benefitImageFont': // 受益人证件照正面（人像面）
          ocrIdCard({ url: val, side: 'front' }).then((res) => {
            benefit.benefitIdType = 'ID_CARD'
            benefit.benefitName = res.data.words_result?.姓名?.words ?? benefit.benefitName
            benefit.benefitIdNo = res.data.words_result?.公民身份号码?.words ?? benefit.benefitIdNo
            benefit.benefitAddress = res.data.words_result?.住址?.words ?? benefit.benefitAddress
          })
          break;
        case 'benefitImageBack': // 受益人证件照反面（国徽面）
          ocrIdCard({ url: val, side: 'back' }).then((res) => {
            const dStart = res.data.words_result?.签发日期?.words
            if (/^\d{8}$/.test(dStart)) {
              benefit.benefitStartDate = dStart.substring(0, 4) + '-' + dStart.substring(4, 6) + '-' + dStart.substring(6, 8)
            }
            const dEnd = res.data.words_result?.失效日期?.words
            if (/^\d{8}$/.test(dEnd)) {
              benefit.benefitExpireDate = dEnd.substring(0, 4) + '-' + dEnd.substring(4, 6) + '-' + dEnd.substring(6, 8)
            } else if (dEnd == '长期') {
              benefit.benefitExpireDate = ''
            }
          })
          break;
      }
    },
  },
  watch: {
    openBank: {
      handler(val) {
        this.handleAddTab()
        this.open = val
      },
      immediate: true
    },
    requestId: {
      handler(val) {
        if (val !== null && val !== "") {
          this.loading = true
          this.getDetail(val)
        }
      },
      immediate: true
    }
  }

}
</script>
<style scoped lang="scss">
.form {
  padding-right: 10px;
  padding-bottom: 80px;
}

.benefitInfoDTOList {
  padding-left: 10px;
}

.footer-operation {
  bottom: 0;
  width: 100%;
  height: 80px;
  display: flex;
  z-index: 10000;
  padding: 0 20px;
  text-align: center;
  position: absolute;
  align-items: center;
  background-color: #ffffff;
  border-top: 1px solid #EBEEF5;

  .el-button {
    width: 100%;
  }
}

::v-deep .el-date-editor.el-input {
  width: 100%;
}
</style>
